<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="<%=basePath%>">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta content="telephone=no,email=no" name="format-detection">
<meta name="wap-font-scale" content="no"><title>我的券包</title>
<link rel="stylesheet" type="text/css" href="css/base.css" />
<link rel="stylesheet" type="text/css" href="css/card-package.css" />
<link rel="stylesheet" type="text/css" href="css/idangerous.swiper.css">

</head>

<body>
<%-- <header class="header">
    <div class="header-left marg1"><img class="img-home" src="images/icon2.png" /></div>
    <div class="header-center word5 "><a class="header-arrow">我的券包</a></div>
    <div class="header-right marg5"><img src="images/icon3.png" width="26" height="26" /></div>
</header> --%>
<div class="main" style="background:#fbfbfb;">
    <div class="exchange"><input name="" type="text" class="exchange-input word4 wor-colour1" value="请输入神奇的兑换码"/><a class="exchange-button word4">兑换</a></div>
    <div class="wrap">
        <div class="tabs">
            <a href="#" hidefocus="true" class="active">优惠券</a>
            <a href="#" hidefocus="true">免房券</a>
            <a href="#" hidefocus="true">礼遇券</a>
        </div>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" style="background:#f5f5f5;">
                    <div class="coupon">
                        <ul class="coupon-pos">
                            <li ><p class="word8">50元抵用券</p><p class="wor-colour5 marg2">最早27天后过期</p><p>有效期：2018-03-13-2018-04-12</p><a class="wor-colour6 ckgz ">查看更多规则</a></li>
                            <li class="word7 word8 wor-colour9">￥50</li>
                        </ul>
                        <img class="coupon-img" src="images/icon36.png"/>
                    </div>
                </div>
                <div class="swiper-slide" style="background:#f5f5f5;">
                    <div class="coupon">
                        <ul class="coupon-pos">
                            <li ><p class="word8">50元抵用券</p><p class="wor-colour5 marg2">最早27天后过期</p><p>有效期：2018-03-13-2018-04-12</p><a class="wor-colour6 ckgz ">查看更多规则</a></li>
                            <li class="word7 word8 wor-colour9">￥50</li>
                        </ul>
                        <img class="coupon-img" src="images/icon36.png"/>
                    </div>
                </div>
                <div class="swiper-slide" style="background:#f5f5f5;">
                    <div class="coupon">
                        <ul class="coupon-pos">
                            <li ><p class="word8">50元抵用券</p><p class="wor-colour5 marg2">最早27天后过期</p><p>有效期：2018-03-13-2018-04-12</p><a class="wor-colour6 ckgz ">查看更多规则</a></li>
                            <li class="word7 word8 wor-colour9">￥50</li>
                        </ul>
                        <img class="coupon-img" src="images/icon36.png"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/idangerous.swiper.min.js"></script>

<script type="text/javascript">
var tabsSwiper = new Swiper('.swiper-container',{
	speed:500,
	onSlideChangeStart: function(){
		$(".tabs .active").removeClass('active');
		$(".tabs a").eq(tabsSwiper.activeIndex).addClass('active');
	}
});

$(".tabs a").on('touchstart mousedown',function(e){
	e.preventDefault()
	$(".tabs .active").removeClass('active');
	$(this).addClass('active');
	tabsSwiper.swipeTo($(this).index());
});

$(".tabs a").click(function(e){
	e.preventDefault();
});
</script>
      
</html>
